<template>
  <div class="block">
    <span class="demonstration">自定义初始值</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隐藏提示文字</span>
    <el-slider v-model="value2" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 提示文字</span>
    <el-slider v-model="value3" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用滑块组件</span>
    <el-slider v-model="value4" disabled></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">不显示间断点</span>
    <el-slider v-model="value5" :step="10"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">显示间断点</span>
    <el-slider v-model="value6" :step="10" show-stops></el-slider>
  </div>

  <div class="block">
    <span class="demonstration">显示输入框</span>
    <el-slider v-model="value7" show-input></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">设置选值区域range</span>
    <el-slider v-model="value8" range show-stops :max="10"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">垂直</span>
    <el-slider v-model="value9" vertical height="200px"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">marks</span>
    <el-slider v-model="value10" range :marks="marks"></el-slider>
  </div>

</template>

<script>
export default {
  data() {
    return {
      value1: 20,
      value2: 50,
      value3: 36,
      value4: 10,
      value5: 60,
      value6: 0,
      value7: 0,
      value8: [4, 8],
      value9: 0,
      value10: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA'
          },
          label: '50%'
        }
      }
    }
  },
  methods: {
    formatTooltip(value) {
      return value / 100
    }
  }
}
</script>